<template>
	<view class="detail" v-show="isloading">
		<view class="music-detail">
			<image :src="songDetail.al.picUrl"></image>
		</view>
		<music-head :title="songDetail.name" :isShow='true' color='white'></music-head>
		<view class="detail-container">
			<scroll-view scroll-y="true">
				<view class="detail-head-content">
					<view class="logo">
						<view class="logo-image">
							<image src="../../static/网易云.png"></image>
							<text>网易云音乐</text>
						</view>
					</view>
					<view class="handle">
						<image src="../../static/播放把手.png"></image>
					</view>
				</view>
				<view class="detail-body">
					<view class="CD">
						<image src="../../static/disc.png"></image>
						<view class="iconfont icon-zanting bofang-button" v-if="isPlay" @tap="pauseMusic"></view>
						<view class="iconfont icon-bofang bofang-button" v-else="isPlay" @tap="playMusic"></view>
						<view class="CD-image">
							<image :class="{'play-music-image' : isPlay}" :src="songDetail.al.picUrl"></image>
						</view>
					</view>
				</view>

				<!-- 歌词部分 -->
				<view class="detail-lyric">
					<view class="detail-scroll" :style="{ transform: 'translateY(' + -(lysicIndex - 1)*70 + 'rpx)' }">
						<view class="music-lyrics" :class="{ active:lysicIndex == index }"
							v-for="(item,index) in songLyric" :key="index">
							{{ item.lysic }}
						</view>
					</view>
				</view>

				<!-- 查看歌词 -->
				<view class="lyrics-view">
					<navigator>在网易云音乐中查看更多歌词</navigator>
				</view>


				<!-- 分享部分 -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="share-content">
					<button open-type="share" class="iconfont icon-fenxiang">
						<text class="share-text">分享给微信好友</text>
					</button>
				</view>
				<!-- #endif -->

				<!-- 喜欢这首歌的人也喜欢 -->
				<view class="people-love">
					<view class="love-head">
						<view class="head-text">喜欢这首歌的人也喜欢</view>
						<view class="head-button">
							<view class="iconfont icon-bofang bofang"></view>
							<view class="button-text">一键收听</view>
						</view>
					</view>
					<view class="love-list">
						<view class="love-music-item" v-for="(item,index) in simiSong" :key="index"
							@tap="handleToSimiSong(item.id)">
							<view class="love-music-icon">
								<image :src="item.album.blurPicUrl"></image>
							</view>
							<view class="love-music-content">
								<view class="music-title">{{ item.name }}</view>
								<view class="music-singer">
									<view class="music-type">
										<image v-if="item.privilege.maxbr == 999000" src="../../static/sq.png"></image>
										<image v-if=" item.privilege.fee == 1" src="../../static/试听.png"></image>
										<image v-if=" item.privilege.fee == 1" src="../../static/vip.png"></image>
									</view>
									<view class="singer-name">
										{{ item.artists[0].name }} - {{ item.album.name }}
									</view>
								</view>
							</view>
							<view class="iconfont icon-24gl-playCircle paly-item-icon">
							</view>
						</view>
					</view>
				</view>

				<!-- 评论区 -->
				<view class="detail-comment">
					<view class="comment-head">精彩评论</view>
					<view class="comment-item" v-for="(item,index) in commontMusic" :key="index">
						<view class="comment-image">
							<image :src="item.user.avatarUrl"></image>
						</view>
						<view class="comment-content">
							<view class="head-content">
								<view class="head-info">
									<view class="user-info">
										<view class="user-name">{{ item.user.nickname }}</view>
										<view class="user-icon">
											<image v-if="item.user.vipType == 11" src="../../static/vip.png"></image>
										</view>
									</view>
									<view class="comment-time">
										{{ item.time | timeFormat }}
									</view>
								</view>
								<view class="thumbs-content">
									<view class="thumbs-number">
										{{ item.likedCount | transformNumber }}
									</view>
									<view class="iconfont icon-zanpress thumbs-icon"></view>
								</view>
							</view>
							<view class="comment-text">
								{{ item.content }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="box"></view>
	</view>
</template>

<script>
	import {
		songDetail,
		commontMusic,
		simiSong,
		lyricMusic,
		songUrl
	} from '../../common/api.js'
	export default {
		data() {
			return {
				isloading: false,
				songDetail: {
					al: {
						picUrl: ''
					}
				},
				commontMusic: {},
				simiSong: {},
				lyricMusic: {},
				songLyric: [], //歌词
				songUrl: {},
				lysicIndex: '0',
				isPlay: false,
				bgMusic: {}, //播放器
				timer: '',
				firstPlay: false
			}
		},
		onLoad(options) {
			console.log(options.detailId)
			this.getMusicInfo(options.detailId)
			this.$store.commit('NEXT_ID', options.detailId); //进行状态管理，存储下一个音乐id
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
			// #ifdef H5
			this.bgMusic.destroy() //销毁实例
			this.isPlay = false
			// #endif
		},
		onHide() {
			clearInterval(this.timer)
			// #ifdef H5
			this.bgMusic.destroy() //销毁实例
			this.isPlay = false
			// #endif
		},
		methods: {
			getMusicInfo(id) {
				uni.showLoading({
					title: '加载中'
				});
				let musicId = id

				Promise.all([songDetail(musicId), commontMusic(musicId), simiSong(musicId), lyricMusic(musicId), songUrl(
						musicId)])
					.then((value) => {
						let [songDetail, commontMusic, simiSong, lyricMusic, songUrl] = value;
						this.songDetail = songDetail.data.songs[0]
						this.commontMusic = commontMusic.data.hotComments
						this.simiSong = simiSong.data.songs
						this.lyricMusic = lyricMusic.data.lrc.lyric
						this.songUrl = songUrl.data.data[0].url
						let re = /\[([^\]]+)\]([^\[]+)/g
						var result = []
						// let arr = []
						// let lysicss = []
						this.lyricMusic.replace(re, ($0, $1, $2) => {
							// arr.push(this.formatToSec($1))
							// lysicss.push($2)
							result.push({
								"time": this.formatToSec($1),
								"lysic": $2
							})
						})
						// let arr1 = []
						// let arr2 = []
						// for(let i = 0;i< arr.length ; i++){
						// 	if(arr[i] && lysicss[i]) {
						// 		console.log('真')
						// 		arr1.push(arr[i])
						// 		arr2.push(lysicss[i])
						// 	}
						// }
						// arr = arr1
						// lysicss = arr2
						// console.log('arr' + arr)
						// console.log('lysicss' + lysicss)
						
						this.songLyric = result
						console.log(this.songLyric)
						// #ifndef H5
						this.bgMusic = uni.getBackgroundAudioManager()
						this.bgMusic.title = this.songDetail.name
						this.bgMusic.coverImgUrl = this.songDetail.al.picUrl
						// #endif
						this.lisentLyricIndex()
						// #ifdef H5
						this.bgMusic = uni.createInnerAudioContext()
						this.bgMusic.autoplay = true
						this.bgMusic.src = this.songUrl
						// #endif
						this.bgMusic.onPlay(() => {
							this.isPlay = true
							this.lisentLyricIndex()
						})
						this.bgMusic.onPause(() => {
							this.isPlay = false
							clearInterval(this.timer)
						})
						this.bgMusic.onEnded(() => {
							this.getMusicInfo(this.$store.state.nextId)
							clearInterval(this.timer)
							// #ifdef H5
							this.bgMusic.destroy() //销毁实例
							// #endif
						})
						uni.hideLoading();
						this.isloading = true
					})
			},
			formatToSec(value) {
				let values = value.split(":")
				return (parseFloat(values[0]) * 60 + parseFloat(values[1])).toFixed(2)
			},
			playMusic() {
				if (!this.firstPlay) {
					this.bgMusic.src = this.songUrl
				} else {
					this.bgMusic.play()
				}
				this.firstPlay = true
				this.isPlay = true
			},
			pauseMusic() {
				this.bgMusic.pause()
				this.isPlay = false
				clearInterval(this.timer)
			},
			lisentLyricIndex() {
				clearInterval(this.timer)
				this.timer = setInterval(() => {
					for (let i = 0; i < this.songLyric.length; i++) {
						if (this.bgMusic.currentTime > this.songLyric[this.songLyric.length - 1].time) {
							this.lysicIndex = this.songLyric.length - 1
							break
						}
						if (this.bgMusic.currentTime >= this.songLyric[i].time && this.bgMusic.currentTime <= this
							.songLyric[i + 1].time) {
							this.lysicIndex = i
							break
						}
					}
				}, 500)
			},
			handleToSimiSong(songId) {
				this.getMusicInfo(songId)
				clearInterval(this.timer)
				// #ifdef H5
				this.bgMusic.destroy() //销毁实例
				// #endif
			}
		}

	}

</script>

<style lang="scss">
	.detail {
		position: relative;
		width: 100%;
		height: 100vh;
	}

	// 播放器头部
	.music-detail {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0820%252Fd7404576j00qy49wm002ec000hs00u8g.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634996792&t=3845f771b238a74f33128a9e1eba48b4);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center 0;
		filter: blur(60px);

		image {
			width: 150%;
			height: 150%;
		}
	}

	//播放器图片主体
	.detail-container {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		scroll-view {
			height: 100%;
		}
	}

	.detail-head-content {
		width: 100%;
		height: 135rpx;
		position: relative;

		.logo {
			width: 237rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;

			.logo-image {
				margin: 7rpx;
				display: flex;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
					margin: 7rpx;
					border-radius: 50%;
				}
			}
		}

		.handle {
			position: absolute;
			left: 50%;
			top: -15%;
			width: 350rpx;
			height: 185rpx;
			transform: rotate(42deg);
			transform-origin: top left;
			z-index: 1;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.detail-body {
		width: 100%;
		height: 725rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.CD {
			width: 550rpx;
			height: 550rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.bofang-button {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 102rpx;
				z-index: 1;
				opacity: 0.5;
			}

			.CD-image {
				width: 374rpx;
				height: 374rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					animation: CD-rotate 10s infinite linear;
					animation-play-state: paused;

					@keyframes CD-rotate {

						from {
							transform: rotate(0deg);
						}

						to {
							transform: rotate(360deg);
						}
					}

				}

				.play-music-image {
					animation-play-state: running;
				}
			}
		}
	}

	.detail-lyric {
		width: 616rpx;
		height: 220rpx;
		margin: auto;
		line-height: 70rpx;
		overflow: hidden;

		.detail-scroll {
			transition: 0.5s;

			.music-lyrics {
				height: 70rpx;
				text-align: center;
				font-size: 29rpx;
				color: rgb(130, 131, 136);

			}

			.active {
				color: white;
			}

			.music-compose {
				text-align: center;
				font-size: 33rpx;
				color: rgb(130, 131, 136);
			}

			.music-producer {
				text-align: center;
				font-size: 33rpx;
				color: rgb(130, 131, 136);
			}
		}
	}

	//查看歌词
	.lyrics-view {
		width: 100%;
		height: 100rpx;

		navigator {
			text-decoration: underline;
			text-align: center;
			line-height: 100rpx;
			color: white;
		}
	}

	//分享部分
	.share-content {
		width: 332rpx;
		height: 70rpx;
		margin: 40rpx auto;

		button {
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 35rpx;
		}

		.icon-fenxiang {
			color: rgb(241, 248, 250);
			border: 4rpx solid white;
		}

		.share-text {
			color: rgb(241, 248, 250);
			margin: 10rpx;
		}
	}


	// 喜欢这首歌的人也喜欢
	.people-love {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;

		.love-head {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			margin: 25rpx;

			.head-text {
				width: 525rpx;
				font-size: 35rpx;
				color: white;
			}

			//一键收听
			.head-button {
				width: 170rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid white;
				border-radius: 40rpx;

				.bofang {
					font-size: 34rpx;
					color: white;
				}

				.button-text {
					font-size: 30rpx;
					color: white;
					margin-left: 5rpx;
				}
			}
		}
	}

	.love-list {
		width: 100%;
		display: flex;
		flex-direction: column;

		.love-music-item {
			width: 100%;
			height: 122rpx;
			display: flex;
			align-items: center;
			position: relative;

			.love-music-icon {
				width: 93rpx;
				height: 93rpx;
				margin: 17rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}

			.love-music-content {
				display: flex;
				flex-direction: column;

				.music-title {
					font-size: 32rpx;
					margin-bottom: 10rpx;
					width: 570rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: white;
				}

				.music-singer {
					display: flex;
					align-items: center;

					.music-type {
						background-color: black;
						line-height: 22rpx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						margin-right: 10rpx;

						image {
							width: 33rpx;
							height: 22rpx;
						}
					}

					.singer-name {
						font-size: 23rpx;
						color: rgb(168, 168, 168);
						width: 500rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.paly-item-icon {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 50rpx;
			}
		}
	}



	// 评论区
	.detail-comment {
		display: flex;
		flex-direction: column;

		.comment-head {
			font-size: 38rpx;
			color: white;
			padding: 20rpx;
		}

		.comment-item {
			display: flex;
			width: 100%;
			margin: 30rpx 0rpx;

			.comment-image {
				width: 62rpx;
				height: 62rpx;
				margin: 0rpx 20rpx;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.comment-content {
				width: 100%;
				display: flex;
				flex-direction: column;
				border-bottom: 1rpx solid rgb(35, 36, 41);

				.head-content {
					position: relative;

					.head-info {
						display: flex;
						flex-direction: column;
						height: 70rpx;

						.user-info {
							display: flex;
							align-items: center;

							.user-name {
								font-size: 28rpx;
								color: white;
							}

							.user-icon {
								width: 38rpx;
								height: 16rpx;
								margin-left: 13rpx;
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									width: 100%;
									height: 100%;
									border-radius: 2rpx;
								}
							}
						}

						.comment-time {
							height: 22rpx;
							font-size: 20rpx;
							color: rgb(102, 103, 108);
						}
					}

					.thumbs-content {
						position: absolute;
						right: 30rpx;
						top: 0rpx;
						display: flex;
						align-items: center;

						.thumbs-number {
							font-size: 27rpx;
							padding-right: 5rpx;
						}

						.thumbs-icon {
							font-size: 35rpx;
						}

					}
				}

				.comment-text {
					font-size: 32rpx;
					line-height: 40rpx;
					padding-right: 40rpx;
					color: white;
					padding: 24rpx 19rpx 38rpx 0rpx;
				}
			}
		}
	}

	.box {
		height: 100rpx;
		width: 100%;
	}
</style>
